<template>
  <!-- 父容器 -->
  <div class="container">
    <div class="hello">
      <h1>数据统计筛分软件</h1>
      <br>
      <el-button type="primary" @click="downloadTemplate"><i class="el-icon-download"></i>下载导入模板</el-button>
      <br>
      <!-- 下载模板a标签 -->
      <a ref="downloadTemplate" style="display: none" href="数据统计筛分软件导入模版.xlsx"></a>
      <div class="box">
        <div class="chl_box">
          <el-upload
              class="upload-demo"
              drag
              action="#"
              :limit=1
              :auto-upload="false"
              :on-change="handleFileUpload"
              multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </div>
      </div>
      <el-button style="height: 40px;width: 100px" size="small" type="success" :disabled="disabled" :loading="loading"
                 @click="handleResult"> 统计结果生成
      </el-button>
    </div>

    <!-- 子容器 -->
    <div class="content">
      <el-table :data="dataList" empty-text="暂无数据" border style="width: 100%">
        <el-table-column prop="name" label="数值" width="150" header-align="center" align="center"/>
        <el-table-column prop="value" label="比例" width="150" header-align="center" align="center"/>
      </el-table>
    </div>
  </div>

</template>

<script>
import {ElMessage} from 'element-plus'
import * as xlsx from "xlsx";

export default {
  name: 'MainIndex',
  props: {
    msg: String
  },
  data() {
    return {
      disabled: true,
      loading: false,
      tableData: [],
      dataList: []
    };
  },
  methods: {

    // 点击模板按钮触发a下载文件
    downloadTemplate() {
      this.$refs.downloadTemplate.dispatchEvent(new MouseEvent('click'))
    },

    handleResult() {
      this.loading = true
      this.dataList = []

      if (this.tableData.length > 100) {
        ElMessage.error('数据量过大，最大仅支持100，请重新选择文件')
        return
      }


      ElMessage.info('数据处理中')
      let obj = {}
      for (let j = 0; j < 80; j++) {
        obj[j + 1] = 0
      }
      // console.log("初始化对象1-80并默认值为0>>>>>>>>>>>>>>>>>", obj)


      for (let i = 0; i < this.tableData.length; i++) {
        let dataArray = this.tableData[i]
        // console.log("开始处理第" + i + "行数据>>>>>>>>>>>>>>>>>", dataArray)

        for (let j = 0; j < dataArray.length; j++) {

          let value = dataArray[j]
          // console.log("第" + i + "行数据>>>>>>>>>>>>>>>>>", value)
          obj[value] += 1
        }
      }

      ElMessage.success('数据处理完毕')

      // 组数
      let size = this.tableData.length;
      for (let j = 0; j < 80; j++) {

        if (obj[j + 1] !== 0) {
          let webData = {}
          webData.name = j + 1;
          webData.value = ((obj[j + 1] / size) * 100).toFixed(2) + '%';
          this.dataList.push(webData)
        }
      }
      // console.log("开始读取excel数据>>>>>>>>>>>>>>>>>", this.dataList)
      this.loading = false
    },

    handleFileUpload(event) {
      ElMessage.info('开始读取Excel数据')
      this.tableData = []
      this.dataList = []
      const file = event.raw;

      const reader = new FileReader();
      // 处理文件内容
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = xlsx.read(data, {type: 'array'});

        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = xlsx.utils.sheet_to_json(worksheet, {header: 1});

        // 提取文件内容
        jsonData.slice(1).forEach(row => {
          if (!row) {
            return
          }
          let data = [];
          for (let i = 0; i < 15; i++) {
            if (row[i]) {
              if (Number(row[i]) > 80) {
                ElMessage.error('数据异常，计算的值最大限制为80，请检查后重试！')
                return
              }
              data.push(row[i])
            }
          }
          if (data.length < 4) {
            ElMessage.error('数据异常，至少需要3个数值，请检查后重试！')
            return
          }
          this.tableData.push(data)
        })
      };
      // 读取文件内容
      reader.readAsArrayBuffer(file);
      this.disabled = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
:deep(.el-upload-list__item-name) {
  padding: 5px 0;
  font-size: 20px;
}

.hello {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  margin: 8px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

.box {
  width: 450px;
  height: 150px;
  position: relative;
}

.chl_box {
  width: 450px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

* {
  margin: 0;
  padding: 0;
}

/* 父容器样式 */
.container {
  height: 1000px;
  margin-top: 100px;
}

/* 子容器样式 */
.content {
  width: 300px;
  height: 800px;
  background-color: white;
  /* 水平垂直居中 */
  /*margin: 50px auto;*/
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}


</style>
